<template>
  <div class="banner-item">
    <div v-if="navigator === 'mobile'" class="h5">
      <div class="btn">
        <div v-for="icon in componentData.icon" :key="icon.id" class="btn-item">
          <img
            :src="icon.url"
            :style="{
              filter: `drop-shadow(${componentData.defaultColor} 100px 0)`,
            }"
            alt=""
          />
          <span
            class="ft-8 mt-10"
            :style="{
              color: componentData.defaultColor,
            }"
          >
            {{ icon.titleZh }}
          </span>
          <span
            class="ft-8"
            :style="{
              color: componentData.defaultColor,
            }"
          >
            {{ icon.subtitleZh }}
          </span>
        </div>
      </div>
    </div>
    <div v-else class="pc">
      <div class="btn">
        <div v-for="icon in componentData.icon" :key="icon.id" class="btn-item">
          <img
            :src="icon.url"
            :style="{
              filter: `drop-shadow(${componentData.defaultColor} 100px 0)`,
            }"
            alt=""
          />
          <span
            class="ft-8 mt-10"
            :style="{
              color: componentData.defaultColor,
            }"
          >
            {{ icon.titleZh }}
          </span>
          <span
            class="ft-8"
            :style="{
              color: componentData.defaultColor,
            }"
          >
            {{ icon.subtitleZh }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
    // 设备型号
    navigator: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {},
  methods: {},
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.banner-item {
  .h5 {
    position: relative;
    min-height: 100px;
    background: #f6f7f9;

    .btn {
      display: flex;
      color: #0261bc;
      justify-content: center;
      flex-wrap: wrap;
      padding: 7px 0;
      font-size: 10px;

      .btn-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        overflow: hidden;
        position: relative;
        width: 80px;
        padding: 18px 0;

        & + .btn-item {
          &::after {
            content: '';
            width: 1px;
            height: 45px;
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            border-left: 1px solid;
            border-image: linear-gradient(
              360deg,
              rgba(255, 255, 255, 0),
              rgba(149, 186, 230, 1),
              rgba(255, 255, 255, 0)
            )
              1 1;
          }

          &::before {
            content: '';
            width: 45px;
            height: 1px;
            display: block;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            border-top: 1px solid;
            border-image: linear-gradient(
              90deg,
              rgba(255, 255, 255, 0),
              rgba(149, 186, 230, 1),
              rgba(255, 255, 255, 0)
            )
              1 1;
          }
        }

        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4) {
          &::before {
            display: none;
          }
        }

        &:nth-child(5) {
          &::after {
            display: none;
          }
        }

        img {
          width: 35px;
          height: 35px;
          filter: drop-shadow(#0261bc 100px 0); // 在右侧 100px 加一个 #FFF 的阴影
          transform: translateX(-100px);
          margin-bottom: 0;
          margin: 0 auto;
        }

        .ft-8 {
          .ft(32);
          .lineH(32);
          .mg(8, 0, 0, 0);

          display: inline-block;
          zoom: 0.5;
        }

        .mt-10 {
          .mg(30, 0, 0, 0);
        }
      }
    }
  }

  .pc {
    background: #f6f7f9;
    border: 1px dashed #e0e4ec;
    position: relative;
    overflow: hidden;
    min-height: 60px;

    .btn {
      display: flex;
      color: #0261bc;
      justify-content: center;
      .ft(12);
      .pd(40, 0, 40, 0);

      .btn-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        overflow: hidden;
        position: relative;
        .maxWidth(180);
        .pd(0, 40, 0, 40);
        .ft(12);

        & + .btn-item {
          &::after {
            .height(90);

            content: '';
            width: 1px;
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            border-left: 1px solid;
            border-image: linear-gradient(
              360deg,
              rgba(255, 255, 255, 0),
              rgba(149, 186, 230, 1),
              rgba(255, 255, 255, 0)
            )
              1 1;
          }
        }

        img {
          .width(72);
          .height(72);

          filter: drop-shadow(#0261bc 100px 0); // 在右侧 100px 加一个 #FFF 的阴影
          transform: translateX(-100px);
          margin-bottom: 0;
          margin: 0 auto;
        }

        .ft-8 {
          .ft(32);
          .lineH(32);
          .mg(8, 0, 0, 0);

          display: inline-block;
          zoom: 0.5;
        }

        .mt-10 {
          .mg(30, 0, 0, 0);
        }
      }
    }
  }
}
</style>
